<template>
    <div class="doc-content-wrapper">
        <div class="doc-content-container">
            <div class="doc-content">
                <h1 class="text-4xl mb-6">正则表达式</h1>

                <a href="https://regex101.com/" class="block mb-5" target="_blank">测试地址：https://regex101.com/</a>

                <h2 class="mb-5 flex items-center">限定符</h2>
                <div class="vp-table">
                    <table>
                        <tr>
                            <th>语法</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>a*</td>
                            <td>a出现0次或多次</td>
                        </tr>
                        <tr>
                            <td>a+</td>
                            <td>a出现1次或多次</td>
                        </tr>
                        <tr>
                            <td>a?</td>
                            <td>a出现0次或1次</td>
                        </tr>
                        <tr>
                            <td>a{6}</td>
                            <td>a出现6次</td>
                        </tr>
                        <tr>
                            <td>a{2,6}</td>
                            <td>a出现2-6次</td>
                        </tr>
                        <tr>
                            <td>a{2,}</td>
                            <td>a出现两次以上</td>
                        </tr>
                    </table>
                </div>

                <h2 class="mb-5 flex items-center">或运算符</h2>
                <div class="vp-table">
                    <table>
                        <tr>
                            <th>语法</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>(a|b)</td>
                            <td>匹配a或者b</td>
                        </tr>
                        <tr>
                            <td>(ab)|(cd)</td>
                            <td>匹配ab或者cd</td>
                        </tr>
                    </table>
                </div>

                <h2 class="mb-5 flex items-center">字符类</h2>
                <div class="vp-table">
                    <table>
                        <tr>
                            <th>语法</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>[abc]+</td>
                            <td>匹配a或者b或者c</td>
                        </tr>
                        <tr>
                            <td>[a-c]+</td>
                            <td>同上</td>
                        </tr>
                        <tr>
                            <td>[a-fA-FO-9]+</td>
                            <td>匹配小写+大写英文字符以及数字</td>
                        </tr>
                        <tr>
                            <td>[^0-9]+</td>
                            <td>匹配非数字字符</td>
                        </tr>
                    </table>
                </div>

                <h2 class="mb-5 flex items-center">元字符</h2>
                <div class="vp-table">
                    <table>
                        <tr>
                            <th>语法</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>\d+</td>
                            <td>匹配数字字符</td>
                        </tr>
                        <tr>
                            <td>\D+</td>
                            <td>匹配非数字字符</td>
                        </tr>
                        <tr>
                            <td>\w+</td>
                            <td>匹配单词字符(英文、数字、下划线)</td>
                        </tr>
                        <tr>
                            <td>\W+</td>
                            <td>匹配非单词字符</td>
                        </tr>
                        <tr>
                            <td>\s+</td>
                            <td>匹配空白符(包含换行符、Tab)</td>
                        </tr>
                        <tr>
                            <td>\S+</td>
                            <td>匹配非空白字符</td>
                        </tr>
                        <tr>
                            <td>.*</td>
                            <td>匹配任意字符(换行符除外)</td>
                        </tr>
                        <tr>
                            <td>\bword\b</td>
                            <td>\b标注字符的边界(全字匹配)</td>
                        </tr>
                        <tr>
                            <td>^</td>
                            <td>匹配行首</td>
                        </tr>
                        <tr>
                            <td>$</td>
                            <td>匹配行尾</td>
                        </tr>
                    </table>
                </div>

                <h2 class="mb-5 flex items-center">贪婪/懒惰匹配</h2>
                <div class="vp-table">
                    <table>
                        <tr>
                            <th>语法</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td v-html="`<.+>`"></td>
                            <td>默认贪婪匹配"任意字符"</td>
                        </tr>
                        <tr>
                            <td v-html="`<.+?>`"></td>
                            <td>懒惰匹配"任意字符"</td>
                        </tr>
                    </table>
                </div>

                <h2 class="mb-5 flex items-center">修饰符</h2>
                <div class="vp-table">
                    <table>
                        <tr>
                            <th>语法</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>/i</td>
                            <td>将匹配设置为不区分大小写，搜索时不区分大小写: A 和 a 没有区别</td>
                        </tr>
                        <tr>
                            <td>/g</td>
                            <td>查找所有的匹配项</td>
                        </tr>
                        <tr>
                            <td>/m</td>
                            <td>使边界字符 ^ 和 $ 匹配每一行的开头和结尾，记住是多行，而不是整个字符串的开头和结尾</td>
                        </tr>
                        <tr>
                            <td>/s</td>
                            <td>默认情况下的圆点 . 是匹配除换行符 \n 之外的任何字符，加上 s 修饰符之后, . 中包含换行符 \n。</td>
                        </tr>
                    </table>
                </div>

                <h1 class="text-4xl mb-6">5种匹配方法</h1>
                
                <p class="mb-3 text-base">用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。</p>
                <Codemirror :code="regexpCode1" name="replace()匹配方法" class="mb-10" />
                <p class="mb-3 text-base">用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。</p>
                <Codemirror :code="regexpCode2" name="search()匹配方法" class="mb-10" />
                <p class="mb-3 text-base">只有一个参数为正则表达式，取出匹配的字段。</p>
                <Codemirror :code="regexpCode3" name="match()匹配方法" class="mb-10" />
                <p class="mb-3 text-base">用于检索字符串中的正则表达式的匹配。 该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。</p>
                <Codemirror :code="regexpCode4" name="exec()匹配方法" class="mb-10" />
                <p class="mb-3 text-base">测试正则表达式与指定字符串是否匹配</p>
                <Codemirror :code="regexpCode5" name="test()匹配方法" class="mb-10" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup () {
        const regexpCode1 = ref(`var re = /(\\w+)\\s(\\w+)/;
var strName = "John Smith";
var newstr = strName.replace(re, "$2, $1");
console.log(newstr);    //Smith, John
        
var str = "cat bat fat";
var result = str.replace(/at/g,"ond");
console.log(result);    //cond bond fond`)

        const regexpCode2 = ref(`var regexp = /script/i;
var text = "JavaScript";
var k = text.search(regexp);    //匹配时返回子串的开始字符位置4
console.log(k)

var str = "abc1223abd";
var reg = /\\d+/;
var i = str.search(reg);    //返回一个位置序号：3
console.log(i)`)

        const regexpCode3 = ref(`var num = /\\d+/g;      //加上g的话，就是全局匹配！
var str = "a3 sdf 45 df";
var i = str.match(num);     //返回["3", "45"]
console.log(JSON.stringify(i))`)

        const regexpCode4 = ref(`var pattern = /Java/g;
var text = "JavaScript is more fun than Java";
var result;
result = pattern.exec(text)
console.log(result[0],result.index,pattern.lastIndex)`)

        const regexpCode5 = ref(`var a = /123456/.test("123456")   //ture
var b = /123456/.test("abc123456")   //ture
var c = /123456/.test("123456abc")   //ture
var d = /123456/.test("12345")   //flase
console.log(a)
console.log(b)
console.log(c)
console.log(d)`)

        return {
            regexpCode1,
            regexpCode2,
            regexpCode3,
            regexpCode4,
            regexpCode5
        }
    }
})
</script>

<style scoped>

</style>